<div ng-controller="ModuleCtrl">
    <header style="margin:5px">
        <form class="form-inline">
	        <div class="btn-group">
		        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			        <span class="clip" style="width:94px;">{{crud.project.name || ' - 请选择项目 - '}}</span>
			        <span class="caret"></span>
		        </button>
		        <ul class="dropdown-menu dropdown-menu-sm">
			        <li><a ng-click="crud.p.q.projectId=undefined; crud.project=undefined; crud.p.load(true)"> - 请选择项目 - </a></li>
			        <li ng-repeat="p in projects">
				        <a ng-click="crud.p.q.projectId=p.id; crud.project=p; crud.p.load(true)">{{p.name}}</a>
			        </li>
		        </ul>
	        </div>
            <label style="margin-left:5px">
                <input class="form-control" type="text" placeholder="请输入模块名称" ng-model="crud.p.q.name" ng-keyup="crud.p.load(true)">
            </label>
            <button class="btn btn-default" ng-click="crud.p.reset();crud.projectName=undefined">重置</button>
            <button class="btn btn-success pull-right" data-toggle="modal" data-target="#moduleAddModal"
                    ng-click="crud.add();crud.activeProject=crud.project;crud.record.projectId=crud.project.id;sqlResolved=false;">添加模块</button>
        </form>
    </header>
    <section class="table-responsive" style="overflow-y:auto">
        <table class="table table-hover" style="margin-bottom:0">
            <thead>
            <tr>
                <th>#</th>
                <th>所属项目</th>
                <th>变量名</th>
                <th>显示名</th>
                <th>模块名</th>
                <th>全名</th>
                <th>表名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="r in crud.p.data">
                <td>{{$index+1}}</td>
                <td>{{projects[r.projectId].name}}</td>
                <td>{{r.name}}</td>
                <td>{{r.displayName}}</td>
                <td>{{r.modelName}}</td>
                <td>{{r.fullName}}</td>
                <td>{{r.tableName}}</td>
                <td>
                    <a ng-click="crud.view(r)" data-toggle="modal" data-target="#moduleViewModal">查看</a>
                    <a ng-click="crud.edit(r)" data-toggle="modal" data-target="#moduleEditModal">修改</a>
                    <a ng-click="editLabels(r)" data-toggle="modal" data-target="#columnModal">修改字段</a>
                    <a ng-click="crud.remove(r)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </section>
    <footer>
        <div class="flow page-ul dropup">
            <div class="btn-group">
                <button class="btn btn-default" ng-click="crud.p.first();"><i class="fa fa-step-backward"></i></button>
                <button class="btn btn-default" ng-click="crud.p.prev();"><i class="fa fa-backward"></i></button>
                <div class="btn-group">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        {{crud.p.pageNumber}} / {{crud.p.pages}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-sm">
                        <li ng-repeat="_ in ((_ = []) && (_.length=(crud.p.pages||0)) && _) track by $index">
                            <a ng-click="crud.p.goto($index+1)">{{$index+1}} / {{crud.p.pages}}</a>
                        </li>
                    </ul>
                </div>
                <button class="btn btn-default" ng-click="crud.p.next();"><i class="fa fa-forward"></i></button>
                <button class="btn btn-default" ng-click="crud.p.last();"><i class="fa fa-step-forward"></i></button>
                <button class="btn btn-default" ng-click="crud.p.load();"><i class="fa fa-refresh"></i></button>
            </div>
            <div class="pull-right">
                <span class="hidden-xs">共有{{crud.p.total}}条数据，显示第{{crud.p.from}}条到第{{crud.p.to}}条，每页</span>
                <div class="btn-group">
                    <button class="btn btn-default dropdown-toggle" style="min-width:55px" data-toggle="dropdown">
                        {{crud.p.pageSize}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li ng-repeat="s in [5,10,20,30,50]" style="min-width:55px"><a ng-click="crud.p.size(s)">{{s}}</a></li>
                    </ul>
                </div>
                条
            </div>
        </div>
    </footer>
    <div id="moduleAddModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">添加模块</h4>
                </div>
                <div class="modal-body">
                    <form id="moduleAddForm" class="form-horizontal" autocomplete="off" novalidate>
	                    <div class="form-group">
		                    <label class="control-label col-xs-3 col-sm-4">所属项目</label>
		                    <div class="col-xs-9 col-sm-5 btn-group">
			                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				                    <span class="clip" style="width:94px;">{{crud.activeProject.name || ' - 请选择项目 - '}}</span>
				                    <span class="caret"></span>
			                    </button>
			                    <ul class="dropdown-menu dropdown-menu-sm">
				                    <li ng-repeat="p in projects">
					                    <a ng-click="crud.activeProject=p;crud.record.projectId=p.id">{{p.name}}</a>
				                    </li>
			                    </ul>
		                    </div>
	                    </div>
	                    <div>
		                    <div class="form-group">
			                    <label class="control-label col-xs-3 col-sm-4" for="add-sql">建表SQL</label>
			                    <div class="col-xs-9 col-sm-8">
				                    <textarea id="add-sql" class="form-control" ng-model="crud.record.createSql" rows="5"></textarea>
			                    </div>
		                    </div>
		                    <div class="form-group">
			                    <div class="col-xs-offset-3 col-sm-offset-4 col-xs-9 col-sm-5">
				                    <button type="button" class="btn btn-primary" ng-click="resolveSql(crud.record)">解析</button>
			                    </div>
		                    </div>
	                    </div>
	                    <div ng-show="sqlResolved">
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="add-name">变量名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="add-name" name="name" class="form-control" type="text" ng-model="crud.record.name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="add-displayName">显示名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="add-displayName" name="displayName" class="form-control" type="text" ng-model="crud.record.displayName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="add-modelName">模块名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="add-modelName" name="modelName" class="form-control" type="text" ng-model="crud.record.modelName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="add-fullName">全名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="add-fullName" name="fullName" class="form-control" type="text" ng-model="crud.record.fullName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="add-tableName">表名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="add-tableName" name="tableName" class="form-control" type="text" ng-model="crud.record.tableName" readonly>
                            </div>
                        </div>
	                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-show="sqlResolved" ng-click="crud.import(crud.record)">添加</button>
                </div>
            </div>
        </div>
    </div>
    <div id="moduleEditModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">修改模块</h4>
                </div>
                <div class="modal-body">
                    <form id="moduleEditForm" class="form-horizontal" autocomplete="off" novalidate>
	                    <div class="form-group">
		                    <label class="control-label col-xs-3 col-sm-4">所属项目</label>
		                    <div class="col-xs-9 col-sm-5">
			                    <p class="form-control-static">{{projects[crud.record.projectId].name}}</p>
		                    </div>
	                    </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="edit-name">变量名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="edit-name" name="name" class="form-control" type="text" ng-model="crud.record.name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="edit-displayName">显示名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="edit-displayName" name="displayName" class="form-control" type="text" ng-model="crud.record.displayName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="edit-modelName">模块名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="edit-modelName" name="modelName" class="form-control" type="text" ng-model="crud.record.modelName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="edit-fullName">全名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="edit-fullName" name="fullName" class="form-control" type="text" ng-model="crud.record.fullName" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4" for="edit-tableName">表名</label>
                            <div class="col-xs-9 col-sm-5">
                                <input id="edit-tableName" name="tableName" class="form-control" type="text" ng-model="crud.record.tableName" readonly>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="crud.save(crud.record)">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div id="moduleViewModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">查看模块</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">所属项目</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{projects[crud.record.projectId].name}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">变量名</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.name}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">显示名</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.displayName}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">模块名</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.modelName}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">全名</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.fullName}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">表名</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.tableName}}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-3 col-sm-4">创建时间</label>
                            <div class="col-xs-9 col-sm-5">
                                <div class="form-control">{{crud.record.createTime}}</div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
	<div id="columnModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">编辑‘{{crud.record.displayName}}’的字段</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
	                    <div class="form-group">
		                    <label class="control-label col-xs-3 col-sm-4">字段</label>
		                    <div class="col-xs-9 col-sm-5">
			                    <p class="form-control-static">标签</p>
		                    </div>
	                    </div>
	                    <div class="form-group" ng-repeat="column in crud.record.columns">
		                    <label class="control-label col-xs-3 col-sm-4" for="edit-{{column.field}}">{{column.field}}</label>
		                    <div class="col-xs-9 col-sm-5">
			                    <input id="edit-{{column.field}}" class="form-control" type="text" ng-model="column.label" required>
		                    </div>
	                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" ng-click="saveLabels(crud.record.columns)">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>